<template>
  <section class="pageComponent">
    <el-pagination
      layout="total,prev, pager, next,jumper"
      :current-page.sync="currentPage"
      :total="total"
      background
      :page-size="10"
      @current-change="changeCurrent"
      v-if="total !== 0"
    >
    </el-pagination>
  </section>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1
    }
  },
  props: ['total', 'defaultPage'],
  watch: {
    defaultPage: function (nv, ov) {
      nv == 1
        ? this.$set(this, 'currentPage', 1)
        : this.$set(this, 'currentPage', nv)
    }
  },
  methods: {
    changeCurrent(num) {
      this.$emit('pageinfo', num)
    }
  }
}
</script>

<style lang="scss">
.pageComponent {
  margin-bottom: 15px;
}
</style>
